<template>
    <div class="main">
        <div class="content">
            <div class="content_left"></div>
            <div class="content_right">
                <img src="../assets/images/南京协同定位与导航研究院logo圆形.png" class="logo">
                <div class="title">CRM管理平台</div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label-width="0px" prop="account">
                        <el-input placeholder="输入用户名" prefix-icon="el-icon-user-solid"
                            v-model="ruleForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px" prop="password">
                        <el-input placeholder="输入密码" prefix-icon="el-icon-unlock" v-model="ruleForm.password"> </el-input>
                    </el-form-item>
                </el-form>
                <el-checkbox v-model="remember">记住密码</el-checkbox>
                <el-button type="primary" round @click="goHome">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: () => ({
        remember: false,
        ruleForm: {
            account: "",
            password: "",
        },
        rules: {
            account: {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
            },
            password: {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }
        }
    }),
    methods: {
        goHome() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: "/api/admin/login",
                        data: this.ruleForm,
                        method: "post"
                    }).then(res => {
                        console.log(res, '登陆');
                        if (res.code === 200) {
                            window.localStorage.setItem("token", res.data.token)
                            this.$message({
                                message: res.message,
                                type: 'success'
                            })
                            this.$router.push({
                                path:"/index",
                                query:{
                                    info:res.data.user
                                }
                            })
                        } else {
                            this.$message({
                                message: res.message,
                                type: 'danger'
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100vh;
    background: #324157;
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        width: 800px;
        height: 420px;
        overflow: hidden;
        border-radius: 32px;
        display: flex;

        >div {
            height: 420px;
            width: 400px;
        }

        .content_left {
            background: #D8D8D8;
        }

        .content_right {
            padding: 36px 60px 0;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;

            ::v-deep .el-input__inner {
                border: none;
                text-indent: 10px;
            }

            .title {
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                height: 50px;
            }

            .el-checkbox {
                align-self: flex-start;
            }

            ::v-deep .el-checkbox__label {
                font-size: 12px;
            }

            .el-button {
                width: 236px;
                font-family: SourceHanSansCN-Bold;
                font-size: 24px;
                font-weight: bold;
                margin-top: 15px;
            }

            .logo {
                width: 80px;
                height: 80px;
            }
        }
    }
}
</style>